<template>
	<view class="tong_cheng" style="height: 100vh;">
		<!-- 顶部自定义导航栏 -->
		<view class="tapbar">
			<view class="tapbar-left" @click='loginToFlag'>
				<text class="iconfont icon-xiangzuojiantou" @click="loginToFlag"></text>
			</view>
			<view class="tapbar-center">
				<text>进店逛逛</text>
			</view>
			<view class="tapbar-right">

			</view>
		</view>
		<view style="overflow-y: auto;height: 1400rpx;">
			<view style='padding: 0rpx 40rpx;margin-bottom: 20rpx;'>
				<img src="../../../static/zheng_hong_cheng_dian.png" alt="" style="width: 100%;border-radius:10rpx ;" />
			</view>
			<view style="padding: 0rpx 70rpx;">
				<view style='display: flex;align-items: center;justify-content: space-between;'>
					<view style="display: flex;">
						<view class="">
							<text style="font-size: 36rpx;font-weight: 600;margin-right: 20rpx;">正弘城店</text>
						</view>
						<view class=""
							style="background-color: #7a8fff;color: #fff;border-radius:20rpx;width: 100rpx;text-align: center;height: 50rpx;line-height: 50rpx;">

							<text>收藏</text>
						</view>
					</view>
					<view>
						<text>详情/电话></text>
					</view>
				</view>
				<view style='height: 60rpx;line-height: 60rpx;'>
					<text>正弘城.商场</text>
				</view>
			</view>
			<view style="padding: 0rpx 80rpx;margin-bottom: 20rpx;">
				<view class='row-1'>
					<view>
						<text class="iconfont icon-shizhong"></text>
						<text style='margin-left: 10rpx;'>营业时间 10:00-22:00</text>
					</view>
					<view class="icons">
						<text class="iconfont icon-jinrujiantou"></text>
					</view>
				</view>
				<view class='row-2'>
					<view>
						<text class="iconfont icon-dizhi1"></text>
						<text style="margin-left: 10rpx;">营业时间 10:00-22:00</text>
					</view>
					<view class="icons">
						<text class="iconfont icon-jinrujiantou"></text>
					</view>
				</view>
			</view>
			<view style="width:90%;height:20rpx;background-color: #f8f8f8;border-radius: 20rpx;margin: 10rpx auto;">
			</view>
			<view class="list_1" style="padding: 0rpx 80rpx;box-sizing: border-box;">
				<view class='list_A_1' style="display: flex;justify-content: space-between;padding-top: 20rpx;">
					<view>
						<text style="font-weight: 600;">彻夜畅玩场</text>
					</view>
					<view class="">
						<text style="font-size: 24rpx;">活动时间：21:00-02:00</text>
					</view>
				</view>
				<view class='list_B_1' style='display: flex;margin-top: 20rpx;'>
					<view>
						<img src="../../../static/zheng_hong_cheng_dian.png" alt=""
							style="width: 100rpx;height: 100rpx;border-radius: 25rpx;" />
					</view>
					<view class=""
						style="display: flex;flex-direction: column; font-size: 24rpx;color:#b7b7b7;margin-left: 20rpx;line-height: 35rpx;">
						<text>21:00至次日06:00内</text>
						<text>数量：20</text>
						<text>康师傅系列6瓶+抽纸（可换百岁山，果粒橙）</text>

					</view>
				</view>
				<view class='list_C_1'
					style="display: flex;justify-content:flex-end;margin-top: 20rpx;margin-bottom: 30rpx; ">
					<view class=""
						style="width: 200rpx;height: 80rpx;background-color: #7a8fff;text-align: center;line-height: 80rpx;border-radius: 100rpx;color: #fff;">
						<text>领取优惠劵</text>
					</view>
				</view>
			</view>
			<view style="width:90%;height:20rpx;background-color: #f8f8f8;border-radius: 20rpx;margin: 10rpx auto;">
			</view>
			<view class="list_1" style="padding: 0rpx 80rpx;box-sizing: border-box;">
				<view class='list_A_1' style="display: flex;justify-content: space-between; padding-top: 20rpx;">
					<view>
						<text style="font-weight: 600;">午间大包间</text>
					</view>
					<view class="">
						<text style="font-size: 24rpx;">活动时间：21:00-02:00</text>
					</view>
				</view>
				<view class='list_B_1' style='display: flex;margin-top: 20rpx;'>
					<view>
						<img src="../../../static/zheng_hong_cheng_dian.png" alt=""
							style="width: 100rpx;height: 100rpx;border-radius: 25rpx;" />
					</view>
					<view class=""
						style="display: flex;flex-direction: column; font-size: 24rpx;color:#b7b7b7;margin-left: 20rpx;line-height: 35rpx;">
						<text>18:00至次日02:00内</text>
						<text>数量：20</text>
						<text>康师傅系列6瓶+抽纸（可换百岁山，果粒橙）</text>

					</view>
				</view>
				<view class='list_C_1'
					style="display: flex;justify-content:flex-end;margin-top: 20rpx;margin-bottom: 30rpx;">
					<view class=""
						style="width: 200rpx;height: 80rpx;background-color: #7a8fff;text-align: center;line-height: 80rpx;border-radius: 100rpx;color: #fff;">
						<text>领取优惠劵</text>
					</view>
				</view>
			</view>
			<view style="width:90%;height:20rpx;background-color: #f8f8f8;border-radius: 20rpx;margin: 10rpx auto;">
			</view>
			<view class="list_1" style="padding: 0rpx 80rpx;box-sizing: border-box;">
				<view class='list_A_1' style="display: flex;justify-content: space-between;padding-top: 20rpx;">
					<view>
						<text style="font-weight: 600;">绝命挖掘师</text>
					</view>
					<view class="">
						<text style="font-size: 24rpx;">活动时间：21:00-02:00</text>
					</view>
				</view>
				<view class='list_B_1' style='display: flex;margin-top: 20rpx;'>
					<view>
						<img src="../../../static/zheng_hong_cheng_dian.png" alt=""
							style="width: 100rpx;height: 100rpx;border-radius: 25rpx;" />
					</view>
					<view class=""
						style="display: flex;flex-direction: column; font-size: 24rpx;color:#b7b7b7;margin-left: 20rpx;line-height: 35rpx;">
						<text>活动时间：13:00-20:00</text>
						<text>数量：20</text>
						<text>康师傅系列6瓶+抽纸（可换百岁山，果粒橙）</text>

					</view>
				</view>
				<view class='list_C_1'
					style="display: flex;justify-content:flex-end;margin-top: 20rpx;margin-bottom: 30rpx;">
					<view class=""
						style="width: 200rpx;height: 80rpx;background-color: #7a8fff;text-align: center;line-height: 80rpx;border-radius: 100rpx;color: #fff;">
						<text>领取优惠劵</text>
					</view>
				</view>
			</view>
		</view>

		<Pinglun :userInfo='userInfo' :tableTotal='tableTotal' :tableData='tableData'></Pinglun>


	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from "vue"
	import Pinglun from "../../ping_lun/ping_lun.vue"
	const loginToFlag = () => { }
	// ----模拟数据------模拟数据------模拟数据----
	// 当前登录用户信息
	let userInfo = reactive({
		id: 120, // 评论id
		user_name: "ikun", // 用户名
		user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像
	});
	let tableTotal = ref(4); // 评论总数
	let tableData = reactive([{
		id: 120, // 评论id
		parent_id: null, // 父级评论id
		reply_id: null, // 被回复人评论id
		reply_name: null, // 被回复人名称
		user_name: "ikun", // 用户名
		user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 评论者头像地址
		user_content: "唱,跳,rap,篮球", // 评论内容
		is_like: false, // 是否点赞
		like_count: 120, // 点赞数统计
		create_time: "2024-01-01 09:16", // 创建时间
	},
	{
		id: 130,
		parent_id: 120, // 评论的父级id
		reply_id: 120, // 被回复评论id
		reply_name: "ikun", // 被回复人名称
		user_name: "小黑子", // 用户名
		user_avatar: "https://pic2.zhimg.com/80/v2-06eade66ec837713d765b1557bf20b25_720w.webp", // 评论者头像地址
		user_content: "姬霓太美", // 评论内容
		is_like: false, // 是否点赞
		like_count: 67, // 点赞数统计
		create_time: "2024-01-01 17:06", // 创建时间
	},
	{
		id: 140,
		parent_id: 120, // 评论的父级id
		reply_id: 130, // 被回复评论id
		reply_name: "小黑子", // 被回复人名称
		user_name: "守护宗主维护宗门", // 用户名
		user_avatar: "https://pic3.zhimg.com/80/v2-244696a62fa750b8570cf56bfaa5b26a_720w.webp", // 评论者头像地址
		user_content: "你露出鸡脚了", // 评论内容
		is_like: false, // 是否点赞
		like_count: 16, // 点赞数统计
		create_time: "2024-01-02 23:08", // 创建时间
	},
	{
		id: 150,
		parent_id: null, // 评论的父级id
		reply_id: null, // 被回复评论id
		reply_name: null, // 被回复人名称
		user_name: "音乐制作人", // 用户名
		user_avatar: "https://pic2.zhimg.com/80/v2-88ec6f8c6d3305122664dd18a28730e5_720w.webp", // 评论者头像地址
		user_content: "只因你太美baby 只因你太美baby 只因你实在是太美baby 只因你太美baby 迎面走来的你让我如此蠢蠢欲动 这种感觉我从未有 Cause I got a crush on you who you 你是我的 我是你的 谁 再多一眼看一眼就会爆炸 再近一点靠近点快被融化", // 评论内容
		is_like: true, // 是否点赞
		like_count: 8, // 点赞数统计
		create_time: "2024-01-08 00:45", // 创建时间
	},
	]); // 评论表
</script>

<style scoped lang="scss">
	::-webkit-scrollbar {
		display: none;
	}

	.tapbar {
		padding: 0rpx 24rpx;
		height: 160rpx;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		padding-top: 90rpx;
		box-sizing: border-box;

		.tapbar-left {
			color: #000;
			flex: 1;
			font-size: 40rpx;
			font-weight: 600;
		}

		.tapbar-center {
			flex: 1;
			font-size: 40rpx;
			font-weight: 600;
			text-align: center;
		}

		.tapbar-right {
			flex: 1;
		}
	}

	.row-1 {
		display: flex;
		justify-content: space-between;
		font-weight: 500;
	}

	.row-2 {
		display: flex;
		justify-content: space-between;
		font-weight: 500;
	}
</style>